<template>
  <div class="app-container">
    <div class="updateAdvertise">

      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
        status-icon>
        <el-form-item label="广告名称" required prop="name">

          <el-input size="default" v-model="ruleForm.name" placeholder="请输广告名称" class="input1" />
        </el-form-item>
        <el-form-item label="广告位置">
          <el-select v-model="advertiseVal.type" class="input1" placeholder="请选择" size="default">
            <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" required prop="startTime">
          <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请选择时间" :size="size"
            format='YYYY-MM-DD' @change="dateChange" />
        </el-form-item>
        <el-form-item label="到期时间" required prop="endTime">
          <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="请选择时间" :size="size" format='YYYY-MM-DD'
            @change="dateChange" />
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-radio-group v-model="ruleForm.status" :active-value="1" :inactive-value="0">
            <el-radio :label="1">上线</el-radio>
            <el-radio :label="0">下线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="广告图片">

          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-preview="handlePreview" :on-success="success"
            :on-remove="handleRemove" list-type="picture">
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件,且不超过100kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="ruleForm.sort" class="input1" />
        </el-form-item>
        <el-form-item label="广告链接" prop="url" required>
          <el-input v-model="ruleForm.url" class="input1" />
        </el-form-item>
        <el-form-item label="广告备注" prop="note">
          <el-input v-model="ruleForm.note" type="textarea" class="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确认
          </el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as http from '@/request/http';
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router'
import type { UploadProps, UploadUserFile } from 'element-plus'

const route = useRoute()
const advertiseVal = reactive({
  name: '',
  endTime: '',
  type: '',
})
const options = [
  {
    type: '0',
    label: 'PC首页轮播',
  },
  {
    type: '1',
    label: 'APP首页轮播',
  },
]

const ruleForm = reactive<updateAdvertiseListModel>({
  id: 0,
  name: '',
  type: '',
  pic: '',
  startTime: '',
  endTime: '',
  status: -1,
  clickCount: -1,
  orderCount: -1,
  url: '',
  note: '',
  sort: -1,

})
const fileList = ref<UploadUserFile[]>([])
// 图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
http.updateAdvertise.homeAdvertiseListById(Number(route.query.id)).then(res => {
  Object.assign(ruleForm, res.data)
  // if (res.data.pic !== null && res.data.pic !== "") {
  //   const parts = res.data.pic?.split("/");
  //   const result = parts![parts!.length - 1];
  //   fileList.value.push({ name: result, url: res.data.pic })
  // }
  // fileList.value[0].name = res.data.pic
  // fileList.value[0].url = res.data.pic
})

const size = ref<'default' | 'large' | 'small'>('default')
const formSize = ref('default')
console.log(formSize);
const dateChange = () => { }
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<updateAdvertiseListModel>>({
  name: [
    { required: true, message: '请输入广告名称', trigger: 'blur' },
  ],
  startTime: [
    {
      type: 'date',
      required: true,
      message: '请选择时间',
      trigger: 'change',
    },
  ],
  endTime: [
    {
      type: 'date',
      required: true,
      message: '请选择时间',
      trigger: 'change',
    },
  ],
  url: [
    {
      required: true,
      message: '请输入地址',
      trigger: 'blur',
    },
  ],
  note: [
    {
      required: true,
      message: '请输入备注',
      trigger: 'blur',
    },
  ],

})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      http.updateAdvertise.advertiseCreate(ruleForm).then(res => {
        console.log(res);
      })
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const success: UploadProps['onSuccess'] = (file) => {
  console.log(file);
  ruleForm.pic = file.data.url
}
</script>

<style scoped lang="less">
.updateAdvertise {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 650px;
  padding: 0;
  width: 990px;
  border: 1px solid #ccc;

  overflow: hidden;
  padding: 20px;

  &::-webkit-scrollbar {
    width: 0;
  }
}

:deep(.input1) {
  width: 340px;

}

:deep(.textarea) {
  width: 340px;

}
</style>


